<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
.mainTextArea {
	width: 800px;
	height: 600px;
	background-color: white;
}
body {
	background-color:gray;
}
</style>
</head>

<body>
<div class="mainTextArea" id="mainTextArea" contenteditable="true">
</div>

<script type="text/javascript">
var head;

function Node()
{
    this.children = new Array();
}
Node.prototype.childrenAll = function ()
{
	return this.children;
}
Node.prototype.getChildAtPosition = function(index)
{
    return this.children[index];
}

// newNode.insert(parent)
Node.prototype.insert = function(parent)
{
    parent.children.push(this);
    // Record its parent when a node is inserted
    this.parent = parent;
}

// newNode.insertAtPosition(parent,position)
Node.prototype.insertAtPosition = function(parent,index)
{
    parent.children.splice(index,0,this);
    this.parent = parent;
}

// newNode.insertAfter(oldNode)
Node.prototype.insertAfter = function(node)
{
    // node.parent is valid because it is recorded when the old node is inserted
    var p = node.parent;
    var i = p.children.indexOf(node);
    this.insertAtPosition(p,i+1);
}

Node.prototype.insertBefore = function(node)
{
    var p = node.parent;
    var i = p.children.indexOf(node);
    this.insertAtPosition(p,i+1);
}

//example

head = new Node();
head.level=0;
head.width=0;


$("#mainTextArea").text(JSON.stringify(head,
function(key,value)
{
    if(key=="parent")
    {
        return "<parent>";
    }
    else
    {
        return value;
    }
}
));

</script>
</body>

</html>
